<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
       <!-- <script type="text/javascript">var CTP_WEB_FULLPATH = "../../"</script> --> 
        <script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jquery/jquery-migrate.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>		
        <script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/ctp.base.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/ctp.ui.component.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/groupbox/ctp.ui.groupbox.js">
		</script>
		<script type="text/javascript" src="../../js/ctp/gridlayout/ctp.ui.gridlayout.js">
        </script>	
        <script type="text/javascript" src="../../js/ctp/multiselect/ctp.ui.multiselect.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/toolbar/ctp.ui.toolbar.js">
        </script>
		 <script type="text/javascript" src="../../js/ctp/validator/ctp.validator.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/validator/ctp.validator-rules.js">
        </script>		
		<script type="text/javascript" src="../../js/ctp/messagebox/ctp.ui.messagebox.js"></script>
		 <script type="text/javascript" src="../../js/ctp/textfield/ctp.ui.textfield.js">
        </script>
        <link href="../../css/skins/standard/ctp-common.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/button.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/groupbox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/messagebox.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/gridlayout.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/multiselect.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/toolbar.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/textfield.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/validator.css" rel="stylesheet" type="text/css"/>
		
        <script>
            // ctp.core.log.lvl=ctp.core.loglvl.info;            
            $(document).ready(function(){ 
				var textfield1 = new ctp.ui.textfield({
					id:'textfield1',
					type:'text'
				});
				var toolbar1 = new ctp.ui.toolbar({
	            	id: 'toolbar1',
                    border: 'bottom',
                    leftItems: [{
                        id: "textfield1",
                        type: 'textfield',
                        text: '搜索：',
                        object: textfield1
                    }, {
                        id: "buttonsearchleft",
                        type: 'button',
                        text: '搜索待选区域',
                        onClick:function(){
								multiselect1.searchByText(textfield1.getValue(),'left');
							}
                    }, {
                        id: "buttonsearchright",
                        type: 'button',
                        text: '搜索已选区域',
                        onClick:function(){
								multiselect1.searchByText(textfield1.getValue(),'right');
							}
                    }, {
                        id: "buttonsearchall",
                        type: 'button',
                        text: '搜索全部区域',
                        onClick:function(){
								multiselect1.searchByText(textfield1.getValue(),'all');
							}
                    }]
	            });
				
            	var multiselect1 = new ctp.ui.multiselect({
	            	id: 'multiselect1',
	            	remote:{url:'multiselect_data.json'},
					viewRow:7,
					validate: 'rules[required]',
	            	icon:'cmp'
	            });
                
                var button1=new ctp.ui.button({
                    id: 'button1',
                    text: '获取宽度',
                    width: '100%',
                    onClick: function(){
                    	ctpMSB.alert({title:'信息提示',message:multiselect1.getWidth()});
                    }
                });
                var button2=new ctp.ui.button({
                    id: 'button2',
                    text: '设置宽度为300px',
                    width: '100%',
                    onClick: function(){
                        multiselect1.setWidth('300px');
                    }
                });
                var button3=new ctp.ui.button({
                    id: 'button3',
                    text: '获取显示行数',
                    width: '100%',
                    onClick: function(){
                    	ctpMSB.alert({title:'信息提示',message:multiselect1.getViewRow()});
                    }
                });
                var button4=new ctp.ui.button({
                    id: 'button4',
                    text: '设置显示行数为10行',
                    width: '100%',
                    onClick: function(){
                        multiselect1.setViewRow(10);
                    }
                });
                var button5=new ctp.ui.button({
                    id: 'button5',
                    text: '是否显示',
                    width: '100%',
                    onClick: function(){                
						ctpMSB.alert({title:'信息提示',message:multiselect1.getVisible()});
                    }
                });
               var button6= new ctp.ui.button({
                    id: 'button6',
                    text: '显示组件',
                    width: '100%',
                    onClick: function(){
                        multiselect1.setVisible(true);
                    }
                });
                var button7=new ctp.ui.button({
                    id: 'button7',
                    text: '隐藏组件',
                    width: '100%',
                    onClick: function(){
                        multiselect1.setVisible(false);
                    }
                });
                var button8=new ctp.ui.button({
                    id: 'button8',
                    text: '是否禁用',
                    width: '100%',
                    onClick: function(){
                        ctpMSB.alert({title:'信息提示',message:multiselect1.isDisable()});
                    }
                });
				var button9= new ctp.ui.button({
                    id: 'button9',
                    text: '设置不可用',
                    width: '100%',
                    onClick: function(){						
						multiselect1.setDisable(true);                       
                    }
                });
				var button10= new ctp.ui.button({
                    id: 'button10',
                    text: '设置可用',
                    width: '100%',
                    onClick: function(){
						multiselect1.setDisable(false);  						                        
                    }
                });
				var button11= new ctp.ui.button({
                    id: 'button11',
                    text: '取得组件类型',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:multiselect1.getCtpWebType()});                      
                    }
                });
                var button12= new ctp.ui.button({
                    id: 'button12',
                    text: '取得组件ID',
                    width: '100%',
                    onClick: function(){						  
						ctpMSB.alert({title:'信息提示',message:multiselect1.getId()});             
                    }
                });
                var button13= new ctp.ui.button({
                    id: 'button13',
                    text: '取得组件名称',
                    width: '100%',
                    onClick: function(){	
                    	ctpMSB.alert({title:'信息提示',message:multiselect1.getName()});
                    }
                });
                var button14= new ctp.ui.button({
                    id: 'button14',
                    text: '重置组件',
                    width: '100%',
                    onClick: function(){	
                    	multiselect1.reset();
                    }
                });
                var button15= new ctp.ui.button({
                    id: 'button15',
                    text: '设置组件事件',
                    width: '100%',
                    onClick: function(){	
                    	multiselect1.onChange(function(){alert('你选中了组件');});
                    }
                });
                var button16= new ctp.ui.button({
                    id: 'button16',
                    text: '取得组件的值',
                    width: '100%',
                    onClick: function(){
                    	ctpMSB.alert({title:'信息提示',message:multiselect1.getValue()});
                    }
                });
                var button17= new ctp.ui.button({
                    id: 'button17',
                    text: '设置组件的值',
                    width: '100%',
                    onClick: function(){
                    	multiselect1.setValue('China,Japan,America');
                    }
                });
                var button18= new ctp.ui.button({
                    id: 'button18',
                    text: '根据Url加载组件选项',
                    width: '100%',
                    onClick: function(){
                    	multiselect1.reloadData({url:'multiselect_data.json'});
                    }
                });
                var button19= new ctp.ui.button({
                    id: 'button19',
                    text: '直接加载组件选项',
                    width: '100%',
                    onClick: function(){
                    	multiselect1.reloadItems([{"text":"aa","value":"bb"}]);
                    }
                });
                var button20= new ctp.ui.button({
                    id: 'button20',
                    text: '获取选中的文本',
                    width: '100%',
                    onClick: function(){
                    	ctpMSB.alert({title:'信息提示',message:multiselect1.getSelectedTexts()});
                    }
                });
                var button21= new ctp.ui.button({
                    id: 'button21',
                    text: '根据值获取对象',
                    width: '100%',
                    onClick: function(){
						var _obj=multiselect1.getJqObjByValue('China','right');
						var _value=_obj?multiselect1.getInfoByJqObj(_obj).value:"";
                    	ctpMSB.alert({title:'信息提示',message:_value});
                    }
                });
                var button22= new ctp.ui.button({
                    id: 'button22',
                    text: '根据文本获取对象',
                    width: '100%',
                    onClick: function(){
                    	ctpMSB.alert({title:'信息提示',message:multiselect1.getInfoByJqObj(multiselect1.getJqObjByText('中国','right')).value});
                    }
                });
                var button23= new ctp.ui.button({
                    id: 'button23',
                    text: '根据序号获取对象',
                    width: '100%',
                    onClick: function(){
                    	ctpMSB.alert({title:'信息提示',message:multiselect1.getInfoByJqObj(multiselect1.getJqObjByIndex(0,'right')).value});
                    }
                });
                var button24= new ctp.ui.button({
                    id: 'button24',
                    text: '删除所有项',
                    width: '100%',
                    onClick: function(){
                    	multiselect1.delAllItems();
                    }
                });
                var button25= new ctp.ui.button({
                    id: 'button25',
                    text: '删除左边项',
                    width: '100%',
                    onClick: function(){
                    	multiselect1.delLeftItems();
                    }
                });
                var button26= new ctp.ui.button({
                    id: 'button26',
                    text: '删除右边项',
                    width: '100%',
                    onClick: function(){
                    	multiselect1.delRightItems();
                    }
                });
                var button27= new ctp.ui.button({
                    id: 'button27',
                    text: '删除选项',
                    width: '100%',
                    onClick: function(){
                    	multiselect1.delItems([multiselect1.getJqObjByIndex(0,'left'),multiselect1.getJqObjByIndex(1,'left')]);
                    }
                });
                var button28= new ctp.ui.button({
                    id: 'button28',
                    text: '获得选中项的个数',
                    width: '100%',
                    onClick: function(){
                    	ctpMSB.alert({title:'信息提示',message:multiselect1.getSelectedCount()});
                    }
                });
                var button29= new ctp.ui.button({
                    id: 'button29',
                    text: '取得列表项的数量',
                    width: '100%',
                    onClick: function(){
                    	ctpMSB.alert({title:'信息提示',message:multiselect1.getItemsCount()});
                    }
                });
                var button30= new ctp.ui.button({
                    id: 'button30',
                    text: '添加选项',
                    width: '100%',
                    onClick: function(){
                    	multiselect1.addGroupItem([{text:'aa',value:'bb'}]);
                    }
                });
                var button31= new ctp.ui.button({
                    id: 'button31',
                    text: '获得选中的对象的个数',
                    width: '100%',
                    onClick: function(){
                    	ctpMSB.alert({title:'信息提示',message:multiselect1.getSelectedObjs().length});
                    }
                });
				var button32= new ctp.ui.button({
                    id: 'button32',
                    text: '获得未选中的文本',
                    width: '100%',
                    onClick: function(){
                    	ctpMSB.alert({title:'信息提示',message:multiselect1.getUnSelectedTexts()});
                    }
                });
				var button33= new ctp.ui.button({
                    id: 'button33',
                    text: '获得未选中的值',
                    width: '100%',
                    onClick: function(){
                    	ctpMSB.alert({title:'信息提示',message:multiselect1.getUnSelectedValue()});
                    }
                });
				var button34= new ctp.ui.button({
                    id: 'button34',
                    text: '获得所有的文本',
                    width: '100%',
                    onClick: function(){
                    	ctpMSB.alert({title:'信息提示',message:multiselect1.getAllTexts()});
                    }
                });
				var button35= new ctp.ui.button({
                    id: 'button35',
                    text: '获得所有的值',
                    width: '100%',
                    onClick: function(){
                    	ctpMSB.alert({title:'信息提示',message:multiselect1.getAllValue()});
                    }
                });

                
				var button36= new ctp.ui.button({
                    id: 'button36',
                    text: '测试',
                    width: '100%',
                    onClick: function(){
                    	var test = [];
						test.push('ctpPackage: '+multiselect1.ctpPackage+'\n');
						//test.push('getTemplate: '+multiselect1.getTemplate({})+'\n');
						test.push('initEvent: '+multiselect1.initEvent()+'\n');
						test.push('initSettings: '+multiselect1.initSettings+'\n');
						test.push('isContainer: '+multiselect1.isContainer+'\n');
						test.push('isHidden: '+multiselect1.isHidden+'\n');
						test.push('isNeedRender: '+multiselect1.isNeedRender+'\n');
						test.push('isNeedReset: '+multiselect1.isNeedReset+'\n');
						test.push('jqDom: '+multiselect1.jqDom+'\n');
						test.push('resize: '+multiselect1.resize()+'\n');
						test.push('settings: '+multiselect1.settings+'\n');
						test.push('type: '+multiselect1.type+'\n');
						test.push('version: '+multiselect1.version+'\n');
						test.push('rendered: '+multiselect1.rendered+'\n');
						//test.push('renderTo: '+multiselect1.renderTo()+'\n');
						//test.push('render: '+multiselect1.render()+'\n');
						//test.push('remove: '+multiselect1.remove()+'\n');
						alert(test.join(''));

						test = [];
						//test.push('afterInit: '+multiselect1.afterInit()+'\n');
						//test.push('destroy: '+multiselect1.destroy()+'\n');
						test.push('getCtpWebType: '+multiselect1.getCtpWebType()+'\n');
						test.push('getDefaultSettings: '+multiselect1.getDefaultSettings()+'\n');
						test.push('getDomId: '+multiselect1.getDomId()+'\n');
						test.push('getFieldDomId: '+multiselect1.getFieldDomId()+'\n');
						test.push('getFieldJqDom: '+multiselect1.getFieldJqDom()+'\n');
						test.push('getFnContext: '+multiselect1.getFnContext()+'\n');
						test.push('getHeight: '+multiselect1.getHeight()+'\n');
						test.push('getId: '+multiselect1.getId()+'\n');
						test.push('getInitSettings: '+multiselect1.getInitSettings()+'\n');
						test.push('getInitValue: '+multiselect1.getInitValue()+'\n');
						test.push('getJqDom: '+multiselect1.getJqDom()+'\n');
						test.push('getName: '+multiselect1.getName()+'\n');
						test.push('getPkgContext: '+multiselect1.getPkgContext()+'\n');
						test.push('getSettings: '+multiselect1.getSettings()+'\n');
						test.push('getWidth: '+multiselect1.getWidth()+'\n');
						test.push('hide: '+multiselect1.hide()+'\n');
						alert('hide')
						//test.push('init: '+multiselect1.init()+'\n');
						test.push('isDisable: '+multiselect1.isDisable()+'\n');
						test.push('isReadOnly: '+multiselect1.isReadOnly()+'\n');
						test.push('onChange: '+multiselect1.onChange(function(){alert('hello,world')},false)+'\n');
						test.push('removeJqDoms: '+multiselect1.removeJqDoms()+'\n');
						test.push('reset: '+multiselect1.reset()+'\n');
						test.push('setDisable: '+multiselect1.setDisable(true)+'\n');
						test.push('setWidth: '+multiselect1.setWidth('400px')+ ' ' + (multiselect1.getWidth()==400) +'\n');
						test.push('setHeight: '+multiselect1.setHeight('50px')+ ' ' + (multiselect1.getHeight()==50) + '\n');
						test.push('setSize: '+multiselect1.setSize('400px','100px')+ ' ' + (multiselect1.getHeight()==100 && datepicker1.getWidth()==400) + '\n');
						test.push('setReadOnly: '+multiselect1.setReadOnly(true)+ ' ' + (multiselect1.isReadOnly()==true) + '\n');
						test.push('show: '+multiselect1.show()+'\n');
						alert('show')
						alert(test.join(''));

						test = [];
						test.push('setValue: '+multiselect1.setValue('China')+'\n');
						test.push('getValue: '+multiselect1.getValue()+'\n');
						test.push('clearSearch: '+multiselect1.clearSearch()+'\n');
						test.push('moveItemUpper: '+multiselect1.moveItemUpper()+'\n');
						test.push('moveItemUp: '+multiselect1.moveItemUp()+'\n');
						test.push('moveItemAllRight: '+multiselect1.moveItemAllRight()+'\n');
						test.push('moveItemRight: '+multiselect1.moveItemRight()+'\n');
						test.push('moveItemLeft: '+multiselect1.moveItemLeft()+'\n');
						test.push('moveItemAllLeft: '+multiselect1.moveItemAllLeft()+'\n');
						test.push('moveItemDown: '+multiselect1.moveItemDown()+'\n');
						test.push('moveItemDowner: '+multiselect1.moveItemDowner()+'\n');
						test.push('requestChain: '+multiselect1.requestChain()+'\n');
						test.push('reset: '+multiselect1.reset()+'\n');

						test.push('getViewRow: '+multiselect1.getViewRow()+'\n');
						test.push('setViewRow: '+multiselect1.setViewRow()+'\n');
						test.push('getOnchange: '+multiselect1.getOnchange()+'\n');
						test.push('onChange: '+multiselect1.onChange(function(){alert(999)})+'\n');
						test.push('getVisible: '+multiselect1.getVisible()+'\n');
						test.push('setVisible: '+multiselect1.setVisible(true)+'\n');
						test.push('getAllValue: '+multiselect1.getAllValue()+'\n');
						test.push('getUnSelectedValue: '+multiselect1.getUnSelectedValue()+'\n');
						test.push('reloadData: '+multiselect1.reloadData()+'\n');
						test.push('reloadItems: '+multiselect1.reloadItems()+'\n');
						test.push('getSelectedTexts: '+multiselect1.getSelectedTexts()+'\n');
						test.push('getUnSelectedTexts: '+multiselect1.getUnSelectedTexts()+'\n');
						test.push('getAllTexts: '+multiselect1.getAllTexts()+'\n');
						test.push('searchByText: '+multiselect1.searchByText()+'\n');
						test.push('getJqObjByValue: '+multiselect1.getJqObjByValue('China')+'\n');
						test.push('getJqObjByText: '+multiselect1.getJqObjByText('中国')+'\n');
						test.push('getJqObjByIndex: '+multiselect1.getJqObjByIndex(0)+'\n');
						//test.push('getInfoByJqObj: '+multiselect1.getInfoByJqObj()+'\n');
						test.push('toggleItem: '+multiselect1.toggleItem()+'\n');
						test.push('delAllItems: '+multiselect1.delAllItems()+'\n');
						test.push('delLeftItems: '+multiselect1.delLeftItems()+'\n');
						test.push('delRightItems: '+multiselect1.delRightItems()+'\n');
						test.push('delItems: '+multiselect1.delItems()+'\n');
						test.push('getSelectedCount: '+multiselect1.getSelectedCount()+'\n');
						test.push('getItemsCount: '+multiselect1.getItemsCount()+'\n');

						test.push('remove: '+multiselect1.remove()+'\n');
						alert(test.join(''));
                    }
                });

			
                
                var showLayout = new ctp.ui.gridlayout({
					id:'showLayout',
                    width: '100%',
                    cols: 1,
                    align: 'center',
                    colSpace: 30,
                    items: [[{element: multiselect1}]]
                
                });  
				var showGroupbox=new ctp.ui.groupbox({
			  	    id: 'showGroupbox',					
					items:[showLayout],
					title:'效果展示区'						   
			     });
				var buttonsLayout = new ctp.ui.gridlayout({
					id:'buttonsLayout',
                    width: '98%',
                    cols: 4,
                    align: 'center',
                    colSpace: 30,
                    items: [
					     [{element: button1},{element: button2},{element: button3},{element: button4}],
						 [{element: button5},{element: button6},{element: button7},{element: button8}],
						 [{element: button9},{element: button10},{element: button11},{element: button12}],
						 [{element: button13},{element: button14},{element: button15},{element: button16}],
						 [{element: button17},{element: button18},{element: button19},{element: button20}],
						 [{element: button21},{element: button22},{element: button23},{element: button24}],
						 [{element: button25},{element: button26},{element: button27},{element: button28}],
						 [{element: button29},{element: button30},{element: button31},{element: button32}],
						 [{element: button33},{element: button34},{element: button35},{element:button36}]
					]
                
                }); 
				var buttonsGroupbox=new ctp.ui.groupbox({
			  	    id: 'buttonsGroupbox',						
					items:[buttonsLayout],
					width:'100%',
					title:'功能测试区'						   
			     });
				new ctp.ui.panel({
                    title: 'multiselect实例',
                    collapsible: true,
                    width: '700px',
                    height: 'auto',
					align:'center',
					items:[toolbar1,showGroupbox,buttonsGroupbox],
                    renderTo: 'body'
                });      
				var validator = new ctp.validator({id:'validator',promptPosition:'bottomLeft',target:multiselect1});      
            });
        </script>
    </head>
    <BODY>
        <b>ctp.ui.multiselect 实例</b>
        <hr/>
        <br/>  
    </BODY>
</html>
